<template>
    <div class="tableWrap">
    <el-card shadow="always">
        <el-form ref="elFormRef" :model="searchParams" :rules="rules" label-width="auto">
            <el-row :gutter="20">
                <el-col :span="8">
                    <!--输入框-->
                    <el-form-item label="输入框：" prop="input">
                        <el-input
                            v-model="searchParams.input"
                            placeholder="请输入输入框"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--文本框-->
                    <el-form-item label="文本框：" prop="textarea">
                        <el-input
                            v-model="searchParams.textarea"
                            placeholder="请输入文本框"
                            type="textarea"
                            :rows="2"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--选择框-->
                    <el-form-item label="选择器：" prop="select">
                        <el-select
                            v-model="searchParams.select"
                            clearable
                            placeholder="请选择选择器"
                        >
                            <el-option v-for="(item,index) in selectOptions" :value="item.value" :label="item.label" :key="index"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <!--日期选择器-->
                    <el-form-item label="ymd日期：" prop="ymd">
                        <el-date-picker
                            v-model="searchParams.ymd"
                            type="date"
                            placeholder="请选择ymd日期"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--日期时间范围选择器-->
                    <el-form-item label="日期范围：" prop="ymdRange">
                        <el-date-picker
                            v-model="searchParams.ymdRange"
                            type="daterange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--单选框-->
                    <el-form-item label="单选：" prop="radio">
                        <el-radio-group v-model="searchParams.radio">
                            <el-radio v-for="item in radioOptions" :label="item.label" :value="item.value" :border="false" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <!--多选框-->
                    <el-form-item label="多选：" prop="multiple">
                        <el-checkbox-group v-model="searchParams.multiple">
                            <el-checkbox v-for="item in multipleOptions" :label="item.label" :value="item.value"  :border="true"/>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--开关-->
                    <el-form-item label="开始：" prop="switch">
                        <el-switch v-model="searchParams.switch" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="padding-bottom: 16px;">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button class="resetBtn" @click="resetSearch">重置</el-button>
        </div>
        </el-card>
        <el-card shadow="always" style="margin-top:10px;">
        <div style="padding-bottom: 16px;">
            <el-button type="primary" icon="el-icon-plus" @click="toAddPageMet">新增</el-button>
            <el-button type="warning" icon="el-icon-download" @click="exportDataMet">导出</el-button>
        </div>
        <el-table
            v-loading="loading"
            stripe
            border
            :data="tableData"
            ref="tableRef"
        >
            <el-table-column label="序号" width="55" align="center">
                <template #default="scope">
                    {{++scope.$index}}
                </template>
            </el-table-column>
            <el-table-column label="列一" align="center"  show-overflow-tooltip  min-width="100">
                <template #default="scope">{{ scope.row.columnOne }}</template>
            </el-table-column>
            <el-table-column label="列二" prop="columnTwo" align="center"   />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" icon="el-icon-edit"  @click="editRowMet(scope.row)" size="small" text>修改</el-button>
                    <el-button type="danger" icon="el-icon-delete"  @click="deleteRowMet(scope.$index,scope.row)" size="small" text>删除</el-button>
                    <el-button type="info" icon="el-icon-view"  @click="viewRowMet(scope.row)" size="small" text>浏览</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-model="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            :total="total"
            background
            layout="->, total, sizes, prev, pager, next, jumper"
            style="margin-top: 15px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        </el-card>
    </div>
</template>
<script setup>
import { ref,reactive } from 'vue'

/* —— 请求表格数据 —————————————————— */
let loading = ref(false);
let tableData = reactive([
    { columnOne: "列一数据1", columnTwo: "列二数据1" },
    { columnOne: "列一数据2", columnTwo: "列二数据2" }
]);
function initData(){
    // 请求表格数据
};
initData();
let selectOptions = reactive([ //选择器：选项
    { label: "选项一", value: "0" },
    { label: "选项二", value: "1" },
]);
let radioOptions = reactive([ //单选：选项
    { label: "单选1", value: "0" },
    { label: "单选2", value: "1" },
]);
let multipleOptions = reactive([ //多选：选项
    { label: "多选1", value: "0" },
    { label: "多选2", value: "1" },
]);

//搜索表单数据
let searchParams = reactive({
    input: "",
    textarea: "",
    select: "",
    ymd: "",
    ymdRange: [],
    ymdRangeStart: "",
    ymdRangeEnd: "",
    radio: "",
    multiple: [],
    switch: false,
});
//表单校验规则
let rules = reactive({
    input: [
        { required: true, message: "请输入输入框", trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: ['blur','change'] }
    ],
    textarea: [{required: true, message: "请输入文本框", trigger: 'blur'}],
    select: [{required: true, message: "请选择选择器", trigger: 'change'}],
    ymd: [{required: false, message: "请选择ymd日期", trigger: 'change'}],
    ymdRange: [{required: true, message: "请选择日期范围", trigger: 'change'}],
    radio: [{required: true, message: "请选择单选", trigger: 'change'}],
    multiple: [{required: false, message: "请选择多选", trigger: 'change'}],
    switch: [{required: false, message: "请选择开始", trigger: 'change'}],
})
//搜索表单方法
const elFormRef = ref(null);
function search() {
    console.log(searchParams);
    elFormRef.value.validate((valid) => {
        if (valid) {
            //搜索
            page.pageNum = 1;
            currentPage.value = 1;
            initData();
        } else {
            //校验未通过
        }
    });
};
//重置表单数据
function resetSearch(){
    //重置
    searchParams.input = ""; //输入框：
    searchParams.textarea = ""; //文本框：
    searchParams.select = ""; //选择器：
    searchParams.ymd = ""; //ymd日期：
    searchParams.ymdRange = [];
    searchParams.ymdRangeStart = "";
    searchParams.ymdRangeEnd = "";
    searchParams.radio = ""; //单选：
    searchParams.multiple = []; //多选：
    searchParams.switch = false; //开始：
};
//新增按钮事件
function toAddPageMet(){
    console.log("新增按钮事件");
};
//导出按钮事件
function exportDataMet(){
    console.log("导出按钮事件");
};
/* —— 分页：start —————————————————— */
let currentPage = ref(1)
let total = ref(0)
let page = reactive({
    pageNum:1,
    pageSize:10,
})
//分页-页数切换
function handleSizeChange(size){
    page.pageSize = size;
    page.pageNum = 1;
    currentPage.value = 1;
    initData();
};
//分页-当前页切换
function handleCurrentChange(currentPage){
    page.pageNum = currentPage;
    initData();
};
/* —— 分页：end —————————————————— */
/* —— 表格操作栏按钮事件：start —————————————————— */
function editRowMet(row){
    //表格-修改按钮事件
    console.log(row);
};
function deleteRowMet(index,row){
    //表格-删除按钮事件
    console.log(index,row);
};
function viewRowMet(row){
    //表格-浏览按钮事件
    console.log(row);
};
/* —— 表格操作栏按钮事件：end —————————————————— */
</script>
<style type="text/css" lang="less" scoped>
.tableWrap {
}
</style>